<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="left">企业信息</div>
                        <div class="right text-blue" @click="openDialogAddVisible">新增企业信息</div>
                    </div>
                    <div class="enterprise-list">
                        <!-- 企业认证列表 -->
                        <div class="enterprise-card" v-for="(item, index) in data.data" :key="index">
                            <div class="enterprise-card-head">
                                <div class="hd">{{ item.name }}</div>
                                <!-- <div>{{ item.status }}</div> -->
                                <div class="state text-blue">{{ item.status_text }}</div>
                            </div>
                            <div class="enterprise-card-cont">
                                <ul>
                                    <li><span>公司性质：</span>{{ item.type }}</li>
                                    <li><span>企业用户名：</span>{{ item.username }}</li>
                                    <li><span>公司电话：</span>{{ item.telephone }}</li>
                                    <li><span>企业联系人姓名：</span>{{ item.contacts_name }}</li>
                                    <li><span>公司地址：</span>{{ item.address }}</li>
                                    <li><span>企业联系人电话：</span>{{ item.contacts_phone }}</li>
                                    <li>
                                        <span>营业执照：</span>
                                        <div class="img-zj">
                                            <el-image 
                                                :src="$commonImageUrl(item.business_permit)" 
                                                :preview-src-list="[$commonImageUrl(item.business_permit)]">
                                            </el-image>
                                        </div>
                                    </li>
                                    <li>
                                        <span>经营许可证：</span>
                                        <div class="img-zj">
                                            <el-image 
                                                :src="$commonImageUrl(item.business_license)" 
                                                :preview-src-list="[$commonImageUrl(item.business_license)]">
                                            </el-image>
                                            <!-- <img src="@/assets/images/yyzz.png" /> -->
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="enterprise-card-foot">
                                <div class="checkbox">
                                    <el-checkbox @change="editDefault(item)" :value="(item.is_default === '1' ? true: false )"></el-checkbox>设为默认主体信息
                                </div>
                                <div class="btn-group">
                                    <nuxt-link :to="'/agency/enterpriseCertificationEdit/' + item.id">
                                        <el-button class="btn-edit">编辑</el-button>
                                    </nuxt-link>
                                    <el-button class="btn-detele" plain @click="deteleEnterprise(item)">删除</el-button>
                                </div>
                            </div>
                        </div>
                        <Custom-pagination :total="data.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="LoadDataList" :hidden="pageHidden"></Custom-pagination>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>

        <!-- 新增企业信息 -->
        <el-dialog
            title="新增企业信息"
            :visible.sync="dialogAddVisible"
            width="800px"
            :close-on-click-modal="false"
            top="2%">
            <div class="dialog-content add-enterprise">
                <el-form ref="form" status-icon :model="form" label-width="150px" label-position="left" :rules="rules" :show-message="false">
                    <el-form-item label="企业用户名" prop="username">
                        <el-input v-model="form.username" placeholder="请输入企业用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址" prop="address">
                        <el-input v-model="form.address" placeholder="请输入公司地址"></el-input>
                    </el-form-item>
                    <el-form-item label="公司电话" prop="telephone">
                        <el-input v-model="form.telephone" placeholder="请输入公司电话"></el-input>
                    </el-form-item>
                    <el-form-item label="公司性质" prop="type">
                        <el-input v-model="form.type" placeholder="请输入公司性质"></el-input>
                    </el-form-item>
                    <el-form-item label="产品类型" prop="category_id">
                        <el-select v-model="form.category_id" placeholder="请选择产品类型">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in categoryList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业联系人姓名" prop="contacts_name">
                        <el-input v-model="form.contacts_name" placeholder="请输入企业联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="企业联系人电话" prop="contacts_phone">
                        <el-input v-model="form.contacts_phone" type="tel" placeholder="请输入企业联系人电话"></el-input>
                    </el-form-item>
                    <el-form-item label="所属区域" prop="province_id">
                        <el-select v-model="form.province_id" placeholder="选择所在省份">
                            <el-option :label="item.province_name" :value="item.province_id" v-for="(item, index) in provinceList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="区域经理" prop="area_manager">
                        <el-input v-model="form.area_manager" placeholder="所在省份区域经理"></el-input>
                    </el-form-item>
                    <div class="item-block">
                        <el-form-item label="经营许可证" prop="business_permit" :required="true">
                            <div class="flex align-center">
                                <!-- <el-upload
                                    class="uploader"
                                    action=""
                                    :show-file-list="false"
                                    :on-success="handlejyxkSuccess">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus uploader-icon"></i>
                                </el-upload> -->
                                <CustomImageUpload v-model="form.business_permit"></CustomImageUpload>
                            </div>
                        </el-form-item>
                        <el-form-item label="经营许可证到期时间" required label-width="120px" prop="expire_time">
                            <el-date-picker
                                v-model="form.expire_time"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <el-form-item label="营业执照" prop="business_license" required>
                        <div class="flex align-center">
                            <!-- <el-upload
                                class="uploader"
                                action=""
                                :show-file-list="false"
                                :on-success="handlejyxkSuccess">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus uploader-icon"></i>
                            </el-upload> -->
                            <CustomImageUpload v-model="form.business_license"></CustomImageUpload>
                        </div>
                    </el-form-item>
                    <div class="item-block">
                        <el-form-item label="二类备案证明" prop="filings_prove">
                            <div class="flex align-center">
                                <!-- <el-upload
                                    class="uploader"
                                    action=""
                                    :show-file-list="false"
                                    :on-success="handlejyxkSuccess">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus uploader-icon"></i>
                                </el-upload> -->
                                <CustomImageUpload v-model="form.filings_prove"></CustomImageUpload>
                            </div>
                        </el-form-item>
                        <el-form-item label="冷链资质" >
                            <div class="flex align-center" prop="cold_chain">
                                <!-- <el-upload
                                    class="uploader"
                                    action=""
                                    :show-file-list="false"
                                    :on-success="handlejyxkSuccess">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus uploader-icon"></i>
                                </el-upload> -->
                                <CustomImageUpload v-model="form.cold_chain"></CustomImageUpload>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="item-block">
                        <el-form-item label="法人代表身份证(正面)" prop="legal_person_front" >
                            <div class="flex align-center">
                                <CustomImageUpload v-model="form.legal_person_front"></CustomImageUpload>
                            </div>
                        </el-form-item>
                        <el-form-item label="法人代表身份证(反面)" prop="legal_person_backend" >
                            <div class="flex align-center">
                                <CustomImageUpload v-model="form.legal_person_backend"></CustomImageUpload>
                            </div>
                        </el-form-item>
                    </div>
                    <el-form-item label="" prop="is_default">
                        <div class="checkbox"><el-checkbox v-model="form.is_default"></el-checkbox>设置为默认企业信息</div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit" :loading="addLoading">保存并提交审核</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        <!-- 新增企业信息结束 -->
    </div>
</template>

<script>
    import api from "@/api/enterprise";
    import commonApi from "@/api/common";
    import { validatePhone } from "@/utils/common";

    export default {
        data() {
            return {
                dialogAddVisible: false,
                categoryList: [],
                provinceList: [],
                addLoading: false,
                form: {
                    username: "", // 企业用户名
                    name: "", // 公司名称
                    address: "", // 公司地址
                    telephone: "", // 公司电话
                    type: "", // 公司性质

                    category_id: "", // 产品类别

                    contacts_name: "", // 企业联系人姓名
                    contacts_phone: "", // 企业联系人电话
                    province_id: "", //区域
                    area_manager: "", // 区域经理

                    business_permit: "", // 经营许可证(文件地址)
                    business_license: "", // 营业执照(文件地址)
                    expire_time: "", // 经营许可证到期时间

                    filings_prove: "", // 二类备案证明(文件地址)
                    cold_chain: "", // 冷链资质

                    legal_person_front: "", // 身份证正面(文件地址)
                    legal_person_backend: "", // 身份证反面(文件地址)
                    is_default: false
                },
                num: 1,
                imageUrl:"",
                value:"",
                checked: "",
                rules: {
                    username: [
                        { required: true, message: '请输入企业用户名', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入公司名称', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入公司地址', trigger: 'blur' },
                    ],
                    telephone: [
                        { required: true, message: '请输入公司电话', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请输入公司性质', trigger: 'blur' },
                    ],
                    category_id: [
                        { required: true, message: '请选择产品类型', trigger: 'change' },
                    ],

                    contacts_name: [
                        { required: true, message: '请输入企业联系人姓名', trigger: 'blur' },
                    ],
                    contacts_phone: [
                        { required: true, message: '请输入企业联系人电话', trigger: 'blur' },
                    ],
                    province_id: [
                        { required: true, message: '请选择所属区域', trigger: 'change' },
                    ],

                    // business_permit: [
                    //     { required: true, message: '请上传经营许可证', trigger: 'change' },
                    // ],
                    // business_license: [
                    //     { required: true, message: '请上传营业执照', trigger: 'blur' },
                    // ],
                    expire_time: [
                        { required: true, message: '请选择营业执照过期时间', trigger: 'change' },
                    ]
                },
                errorInfo: {

                },
                query: {
                    page: 1,
                    pageSize: 4
                },
                data: {
                    data: [],
                    total: 0
                },
                pageHidden: true
            };
        },
        methods: {
            // 提交审核
            onSubmit() {
                var _this = this;
                _this.addLoading = true;
                _this.$refs.form.validate((valid) => {

                    if (_this.form.business_permit.length == 0) {
                        this.$message.error("请上传经营许可证")
                        _this.addLoading = false;
                        return;
                    }
                    if (_this.form.business_license.length == 0) {
                        this.$message.error("请上传营业执照")
                        _this.addLoading = false;
                        return;
                    }
                    
                    if (valid) {
                        if (!validatePhone(_this.form.contacts_phone)) {
                            this.$message.error("请输入正确的企业联系人手机号");
                            _this.addLoading = false;
                            return;
                        }
                        _this.form.is_default = _this.form.is_default ? "1" : "0";
                        api.AddEnterprise(_this.form)
                            .then((res) => {
                                _this.$message.success("提交成功");
                                _this.addLoading = false;
                                _this.dialogAddVisible = false;
                                _this.$refs.form.resetFields();
                                _this.LoadDataList();
                            }).catch((err) => {
                                _this.$message.error("提交失败");
                                _this.addLoading = false;
                            })
                    } else {
                        _this.addLoading = false;
                    }
                })
            },
            isInvalid(field) {
                return field in this.errorInfo;
            },
            getErrorMessage(field) {
                return this.errorInfo[field];  
            },
            // 获取公司性质
            LoadRelevanceType: function () {
                // api.GetType().then((res) => {})
            },
            // 获取产品类型
            LoadProductCategory: function () {
                api.GetCategory()
                    .then((res) => {
                        this.categoryList = res.data;
                    })
            },
            // 加载省份数据
            LoadProvinceList: function () {
                commonApi.GetProvinces()
                    .then((res) => {
                        this.provinceList = res.data;
                    })
            },
            // 打开新增表单窗口
            openDialogAddVisible: function () {
                this.dialogAddVisible = true;
                if (this.$refs.form) {
                    this.$refs.form.resetFields();
                }
            },
            // 获取列表数据
            LoadDataList() {
                api.GetEnterpriseList(this.query)
                    .then((res) => {
                        this.data = res.data;
                        this.pageHidden = false;
                        if (this.query.pageSize >= this.data.total) {
                            this.pageHidden = true;
                        }
                    })
            },
            // 修改
            editDefault: function (item) {
                var _this = this;
                var warningStr = "设置当前企业为默认主体?";
                
                var input = JSON.parse(JSON.stringify(item))
                if (input.is_default == "1") {
                    warningStr = "取消当前企业为默认主体?";
                    input.is_default = "0";
                } else {
                    input.is_default = "1";
                }
                _this.$confirm(warningStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    api.SetEnterprise(input)
                        .then((res) => {
                            _this.$message.success("设置成功");
                            _this.LoadDataList();
                        }).catch((err) => {
                            
                        })
                })
            },
            // 删除企业
            deteleEnterprise: function (item) {
                var _this = this;
                _this.$confirm(`是否删除${item.name}企业`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    var input = {
                        id: item.id
                    }
                    api.DeleteEnterprise(input)
                        .then((res) => {
                            _this.$message.success(`成功删除${item.name}企业`);
                            _this.LoadDataList();
                        }).catch((err) => {
                            
                        })
                })
            }
        },
        mounted: function(){
            this.LoadRelevanceType();
            this.LoadProductCategory();
            this.LoadProvinceList();
            this.LoadDataList();
        },
        created() {
            
        }
    };
</script>
<style>



</style>